<template>
   <div>
      <h1>登录</h1>
      <input type="text" placeholder="请输入用户名" v-model="userName" /> 
      <input type="text" placeholder="请输入密码" v-model="passWd" />
      <p><button @click="handleEnterBtnClick">进入游戏</button></p>
      
   </div>
</template>

<script>

import { ref, onMounted} from 'vue';
import { useRouter } from 'vue-router';

export default {
  name : 'Login',

  setup(props, ctx) {
    const router = useRouter();

    const userName = ref();
    const passWd = ref();


    onMounted(()=>{
        userName.value = localStorage.getItem("userName")
        if(userName.value) {
          router.push("/")
          return;
        }
    })
    // 定义一个函数
    const handleEnterBtnClick = () => {
       const _userName = userName.value.trim()
       if(_userName.length < 6) {
          alert("用户名不小于6位")
          return;
       }
       localStorage.setItem("userName",_userName);
       router.push("/")
       return;
    }
    return {
      userName, passWd, handleEnterBtnClick
    }
  }
}

</script>

<style>
/* @media (min-width: 1024px) {
  .login {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
} */
</style>
